<template>
	<view class="e-p-20 app-cancel">
		<view class="app-cancel__panel bg-white e-radius-20 e-m-b-20 e-p-l-30 e-p-r-30">
			<view class="e-p-t-40 e-font-30 e-m-b-20">
				可取消数量：{{surplayNum || 0}}
			</view>
			<view class="app-cancel__panel--input e-flex-y-center">
				<input type="number" v-model="num" placeholder="请输入取消数量" style="width: 100%;" border="none"/>
			</view>
		</view>
		<view class="app-cancel__btn e-flex-xy-center" @tap="submit">
			<text class="c-white e-font-32 w-500">确认</text>
		</view>
	</view>
</template>

<script>
	import {cancelApply,applyInfo} from '@/common/request/api'
	export default {
		data() {
			return {
				num:'',
				loading:false,
				info:{},
				surplayNum:0
			}
		},
		onShow() {
			applyInfo({type:2}).then(res => {
				if (res.code == 200) {
					this.info = res.data
					this.surplayNum=this.info.scNum - this.info.cancelMoney
				}
			})
		},
		methods:{
			submit() {
				if (this.loading) return
				this.loading = true
				uni.showLoading()
				cancelApply({num:this.num}).then(res => {
					if (res.code == 200) {
						this.$toastApp('取消成功')
						this.num = ''
					}
				}).finally(() => {
					this.loading = false
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@include appBem_b(cancel) {
		@include appBem_e(panel) {
			box-shadow: 0px 4px 20px 0px #F3F3F3;
			height: 262rpx;
			@include appBem_m(input) {
				height: 120rpx;
				box-shadow: inset 0px -1rpx 0px 0px #EDEDED;
			}
		}
		@include appBem_e(btn) {
			height: 100rpx;
			background: #4B68E3;
			border-radius: 50rpx;
		}
	}
</style>